import React from 'react'
import { Tab, Icon, Table, Grid, Container, Button } from 'semantic-ui-react'
import ReactEcharts from "echarts-for-react";

let table = [];

let chartData = {
  height: 150,
  title: {
          text: 'Demo Chart'
  },
  xAxis: {
    type: 'category',
    data: ['1', '2', '3', '4']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), Math.floor(Math.random()*1000)],
    type: 'line'
  }]
};


for (var i = 0; i < 12; i++) {
  let salesNum1 = Math.floor(Math.random()*10000);
  let salesNum2 = Math.floor(Math.random()*10000);
  let salesNum3 = Math.floor(Math.random()*10000);
  let total = salesNum1 + salesNum2 + salesNum3;

  let totalCellAttr = {}
  if (total > 15000) totalCellAttr = {positive: true};
  else if (total < 1000) totalCellAttr = {negative: true}

  table.push(<Table.Row>
    <Table.Cell>{i+1}</Table.Cell>
    <Table.Cell>{salesNum1}</Table.Cell>
    <Table.Cell>{salesNum2}</Table.Cell>
    <Table.Cell>{salesNum3}</Table.Cell>
    <Table.Cell {...totalCellAttr}>{salesNum1 + salesNum2 + salesNum3}</Table.Cell>
  </Table.Row>);
}

const panes = [
  { menuItem: 'Sales Report', render: () =>( 
  <Tab.Pane>
    <Table celled size='small' compact>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell colSpan='5'>2018</Table.HeaderCell>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        <Table.Row>
          <Table.Cell>Month</Table.Cell>
          <Table.Cell>Vertical A</Table.Cell>
          <Table.Cell>Vertical B</Table.Cell>
          <Table.Cell>Vertical C</Table.Cell>
          <Table.Cell>Total</Table.Cell>
        </Table.Row>
        {table}
      </Table.Body>
    </Table>
  </Tab.Pane>
  )},
  { menuItem: 'Sales Dashboard', render: () => (<Tab.Pane>
    <Grid columns={3} divided>
      <Grid.Row>
        <Grid.Column>
          <ReactEcharts
            option={chartData}
            notMerge={true}
            lazyUpdate={true} />
            <Container textAlign='center'>
              <Button size='mini' icon>
                <Icon name='search' />
              </Button>
              <Button size='mini' icon>
                <Icon name='edit' />
              </Button>
              <Button size='mini' icon>
                <Icon name='mail' />
              </Button>
              <Button size='mini' icon>
                <Icon name='close' />
              </Button>
            </Container>
        </Grid.Column>
        <Grid.Column>
          <ReactEcharts
            option={chartData}
            notMerge={true}
            lazyUpdate={true} />
          <Container textAlign='center'>
            <Button size='mini' icon>
              <Icon name='search' />
            </Button>
            <Button size='mini' icon>
              <Icon name='edit' />
            </Button>
            <Button size='mini' icon>
              <Icon name='mail' />
            </Button>
            <Button size='mini' icon>
              <Icon name='close' />
            </Button>
          </Container>
        </Grid.Column>
        <Grid.Column>
          <ReactEcharts
            option={chartData}
            notMerge={true}
            lazyUpdate={true} />
          <Container textAlign='center'>
            <Button size='mini' icon>
              <Icon name='search' />
            </Button>
            <Button size='mini' icon>
              <Icon name='edit' />
            </Button>
            <Button size='mini' icon>
              <Icon name='mail' />
            </Button>
            <Button size='mini' icon>
              <Icon name='close' />
            </Button>
          </Container>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  </Tab.Pane>) }
]

const SalesReport = () => <Tab panes={panes} />

export default SalesReport